<template>
  <div>
    <div id="pietab" title="场馆营收" style="width: 640px;height: 220px;margin: 0 auto"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartData: {
        series: [
          {
            data: [10, 20, 30, 40, 50],
          },
        ],
      },
      option: {
        //   backgroundColor:"#0F285C",
        grid: {
          containLabel: true,
          top: 30,
          right: 15,
          bottom: 0,
          left: 15
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            console.log(params)
            const {
              name,
              data,
            } = params[0];
            return `
            <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</span>
            <sapn style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">：${data} 元</span>
         `
          },
          extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
        },
        xAxis: {
          // 类目轴
          type: "category",
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLine: {
            lineStyle: {
              color: "#CCCCCC"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 14,
              fontFamily: 'Source Han Sans CN-Regular',
            }
          },
        },
        yAxis: {
          type: 'value',
          name: "",
          nameTextStyle: {
            color: 'rgba(0,0,0,0.65)',
            fontSize: 14,
            fontFamily: 'Source Han Sans CN-Regular',
            align: "left",
            verticalAlign: "center",
          },
          axisLabel: {
            color: 'rgba(0,0,0,0.65)',
            textStyle: {
              fontSize: 14
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(223, 223, 223, 1)',
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(223, 223, 223, 1)',
              type: "dashed",
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: "50%",
            showBackground: true,
            backgroundStyle: {
              color: "transparent"
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: "#4B87FFFF"},
                {offset: 1, color: "#82BCFFFF"}
              ])
            },
            data: [132, 66, 54, 37, 88, 136, 12]
          }
        ]
      }
    };
  },
  methods: {
    getAnnounceList() {
      this.loading = true;
      this.$ajax.post("/ststistic/hallststistic").then((response) => {
        console.log("接口查询结果" + response)

        this.option.xAxis.data = response.data[0]
        this.option.series[0].data = response.data[1]

        let chartDom1 = document.getElementById('pietab');
        let myChart1 = echarts.init(chartDom1);
        this.option && myChart1.setOption(this.option);

      });
    },
  },
  created() {
    this.getAnnounceList()
  },
  mounted() {


  },

};
</script>
